<template>
    <div>
        <header-component/>
        <main>
            <div class="info">
                <div v-show="urlName==='User'"><img :src="user.info.head" alt=""></div>
                <div v-show="urlName==='User'">
                    <div><span>登录账号: </span><span>{{ user.info.account }}</span></div>
                    <div><span>姓名: </span><span>{{ user.info.name }}</span></div>
                    <div><span>电话: </span><span>{{ user.info.phone }}</span></div>
                </div>
                <n-form
                    v-show="urlName === 'Password'"
                    ref="formRef"
                    :model="password"
                    :rules="rules"
                    label-placement="left"
                    label-width="auto"
                    require-mark-placement="right-hanging"
                    size="medium"
                    :style="{

                }"
                >
                    <n-form-item label="请输入原密码：" path="old_password">
                        <n-input v-model:value="password.old_password" type="text" placeholder="原密码"/>
                    </n-form-item>
                    <n-form-item label="请输入新密码：" path="new_password">
                        <n-input v-model:value="password.new_password" type="text" placeholder="新密码"/>
                    </n-form-item>
                    <n-form-item label="请输入新密码：" path="new_password2">
                        <n-input v-model:value="password.new_password2" type="text" placeholder="重复新密码"/>
                    </n-form-item>

                </n-form>
            </div>

            <n-upload
                :action="app.ip+'upload/head'"
                :headers="{token: user.getToken}"
                :data="{old_head_url:user.info.head}"
                @finish="handleFinish"
                :file-list-style="{display:'none'}"
            >
                <p v-show="urlName==='User'" class="pointer">上传头像</p>
            </n-upload>
            <n-button-group size="large">
                <n-button @click="changePassword">
                    修改密码
                </n-button>
                <div class="air-brick"/>
                <n-button @click="back">
                    返回
                </n-button>
            </n-button-group>
        </main>
    </div>

</template>

<script setup>

import HeaderComponent from "@/components/header/HeaderComponent.vue";
import {useUserStore} from "@/stores/user";
import router from "@/router";
import {useRoute} from "vue-router";
import {NButton} from "naive-ui";
import workApi from "@/http/workApi";
import {useAppStore} from "@/stores/app";

const user = useUserStore()
const route = useRoute()
const app = useAppStore()

function handleFinish({event}) {
    // 文件上传成功
    console.log(JSON.parse(event.target.response))
    user.setHead(JSON.parse(event.target.response).data.head)
}

const password = ref({
    old_password: '',
    new_password: '',
    new_password2: '',
})
// 验证规则
const rules = {
    old_password: {
        required: true,
        trigger: ['blur'],
        message: '未填'
    },
    new_password: {
        required: true,
        trigger: ['blur'],
        message: '未填'
    },
    new_password2: {
        required: true,
        trigger: ['blur'],
        message: '未填'
    },
}
// 执行验证
const formRef = ref(null);

function changePassword() {
    if (urlName.value === 'Password') {
        formRef.value?.validate((errors) => {
            if (!errors) {
                workApi.post("password", {
                    ...password.value
                }).then(() => {
                    router.push({name: "Login"})
                })
            } else {
                window.$message.error('好像没有填好, 检查一下吧')
            }
        })
    } else {
        router.push({name: "Password"});
    }
}

function back() {
    router.back()
}

const urlName = computed(() => {
    return route.name
})
</script>

<style scoped lang="less">
main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vw;
    height: 50vh;
    border: solid 1px #afeeaa;
    padding: 3% 0;

    .info {
        display: flex;
        justify-content: center;
        width: 70%;
        height: 30%;
        margin: 0 auto;

        > div {
            flex: 1;

            &:nth-child(1) {
                img {
                    float: right;
                    margin-right: 20px;
                    height: 100%;
                }
            }

            &:nth-child(2) {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-start;

                span:nth-child(1) {
                    display: inline-block;
                    width: 70px;
                }
            }
        }

    }

    > .n-upload {
        margin-top: 20px;
        text-align: center;
    }

    .n-button-group {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 30px;

        .air-brick {
            width: 150px;
        }
    }

}
</style>